<template>
	<view>
		<tt-bar title="消息" bgColor="#fbc521" rightIcon=""></tt-bar>
		<view class="quickBtn">
			<view class="btnItem" data-level="1" @tap="toNotice" data-url="noticeList">
				<image src="https://test.hawklu.com/capp/msg1.png"></image>
				<text>考勤消息</text>
			</view>
			<view class="btnItem" data-level="2" @tap="toNotice" data-url="noticeList">
				<image src="https://test.hawklu.com/capp/msg2.png"></image>
				<text>交易消息</text>
			</view>
			<view class="btnItem" data-level="3" @tap="toNotice" data-url="noticeList">
				<image src="https://test.hawklu.com/capp/msg4.png"></image>
				<text>退款消息</text>
			</view>
			<view class="btnItem" data-level="4" @tap="toNotice" data-url="noticeList">
				<image src="https://test.hawklu.com/capp/msg3.png"></image>
				<text>其他消息</text>
			</view>
		</view>
		<scroll-view scroll-y="true" class="covList" :style="{'height':scHeight+'px'}">
			<view class="covRow" v-for="(item,index) in hhList" :key="index" :data-idx="index" @tap="toCovDetail" v-if="hhList.length>0">
				<view class="imgBox">
					<image :src="item.userProfile.avatar?item.userProfile.avatar:'../../static/userPic.png'"></image>
					<text v-if="item.unreadCount" class="unreadText">{{item.unreadCount}}</text>
				</view>
				<view class="userInfo">
					<view class="nameAndTime">
						<text class="userNick" v-text="item.userProfile.nick?item.userProfile.nick:item.userProfile.userID"></text>
						<text class="lastTime" v-text="getTm(item.lastMessage.lastTime)"></text>
					</view>
					<text class="lastMsg">{{item.lastMessage.messageForShow}}</text>
				</view>
			</view>
			<empty-box v-if="hhList.length<1" type="message"></empty-box>
		</scroll-view>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import COMM from "@/common/common.js";
	import {mapState} from "vuex";
	import emptyBox from "@/components/emptyBox/emptyBox.vue"
	export default {
		components: {
			ttBar,
			emptyBox
		},
		computed:{
			...mapState({
				isLogin:state=>state.user.isLogin,
				userInfo:state=>state.user.userInfo,
			})
		},
		data() {
			return {
				tm: null,
				toUser: '',
				textCnt: '',
				hhList: [],
				scHeight: uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight -uni.upx2px(305) - 50
			};
		},
		methods: {
			// 时间戳转换
			getTm(t) {
				let tm = new Date(t * 1000);
				let h = tm.getHours();
				let m = tm.getMinutes()
				// console.log(tm);
				h=h<10?('0'+h):h
				m=m<10?('0'+m):m
				return h + ':' + m
			},
			// 跳转到消息
			toCovDetail(e) {
				let _index = parseInt(e.currentTarget.dataset.idx); //获取索引
				// 上报已读
				this.$tim.setMessageRead({
					conversationID: this.hhList[_index].conversationID
				});
				
				this.toPage({
					url:'conversationDt',
					cvid:this.hhList[_index].conversationID,
					toImId:this.hhList[_index].userProfile.userID
				})
			},
			getData(){
				this.$store.dispatch("timGetCovList").then(res=>{
					this.hhList=res
				})
			},
			toNotice(e){
				if(this.isLogin){
					this.toPage(e)
				}else{
					this.toPage({
						url:'login'
					})
				}
			}
		},
		onShow() {
			
		},
		onLoad() {
			if(this.isLogin){
				this.getData();
				uni.$on("timCovListChange", covList => {
					this.hhList = covList;
				})
			}else{
				this.toPage({
					url: 'login'
				})
			}
			
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	.quickBtn {
		height: 215upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 15upx solid #f6f6f6;

		.btnItem {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 96upx;
				height: 96upx;
				margin-bottom: 15upx;
			}

			text {
				font-size: 22rpx;
				color: #3b434d;
				text-align: center;
				width: 100%;
			}
		}
	}

	.covList {
		display: flex;
		flex-direction: column;

		.covRow {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 28upx 52upx;
			border-bottom: 1px solid #ededed;

			.imgBox {
				width: 86upx;
				height: 86upx;
				position: relative;
				margin-right: 35upx;

				image {
					width: 86upx;
					height: 86upx;
					border-radius: 50%;
				}

				.unreadText {
					display: block;
					width: 33upx;
					height: 33upx;
					text-align: center;
					line-height: 33upx;
					border-radius: 50%;
					background-color: #ff2d1e;
					font-size: 20upx;
					font-weight: bold;
					color: #ffffff;
					position: absolute;
					right: -6upx;
					top: -8upx;
					z-index: 9;
				}
			}

			.userInfo {
				display: flex;
				flex-direction: column;
				flex-grow: 1;

				.nameAndTime {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 15upx;
				}

				.userNick {
					font-size: 28rpx;
					font-weight: bold;
					color: #3b434d;
				}

				.lastTime {
					font-size: 22rpx;
					color: #878888;

				}

				.lastMsg {
					display: inline-block;
					width: 100%;
					font-size: 22rpx;
					color: #878888;
				}
			}
		}
	}
</style>
